<template>
  <div class="home">
    <div class="title">
      <van-icon name="wap-nav" @click="showUserInfo = true" />
      <div class="to">
        <van-row class="tabs">
          <van-col span="6">我的</van-col>
          <van-col span="6">发现</van-col>
          <van-col span="6">云村</van-col>
          <van-col span="6">视频</van-col>
        </van-row>
      </div>
    </div>

    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banners" :key="index">
          <img :src="item.imageUrl" alt="" width="100%" />
        </van-swipe-item>
      </van-swipe>
      <tuijian-muslc></tuijian-muslc>
      <!-- 热门 -->
      <remen></remen>
    </div>

    <!-- 左边弹框 -->
    <van-popup
      v-model="showUserInfo"
      position="left"
      :style="{ height: '100%', width: '75%' }"
    >
      <van-image
        round
        width="64px"
        height="64px"
        fit="cover"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <br />
      <span class="name">fwe</span>
      <van-tag plain type="primary">lv1</van-tag>
      <van-row class="row">
        <van-col span="6">
          <van-icon name="envelop-o" color="#fe7d7d" />
          <br />
          我的信息</van-col
        >
        <van-col span="6">
          <van-icon name="friends-o" color="#fe7d7d" />
          <br />
          我的好友</van-col
        >
        <van-col span="6">
          <van-icon name="star-o" color="#fe7d7d" />
          <br />
          我的收藏</van-col
        >
        <van-col span="6">
          <van-icon name="service-o" color="#fe7d7d" />
          <br />
          听歌识曲</van-col
        >
      </van-row>
      <van-cell-group>
        <van-cell icon="fire-o" title="演出" />
        <van-cell icon="cart-circle-o" title="商城" />
        <van-cell icon="location-o" title="附近的人" />
        <van-cell icon="gem-o" title="我的会员" />
        <van-cell icon="description" title="我的订单" />
        <van-cell icon="play-circle-o" title="定时停止播放" />
        <van-cell icon="scan" title="扫一扫" />
        <van-cell icon="music-o" title="音乐闹钟" />
        <van-cell icon="setting-o" title="设置" @click="isClick" />
        <van-cell
          icon="close"
          title="退出"
          @click="$router.push({ path: '/login' })"
        />
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
import { getBanners, isLogin, ball } from './home'
import tuijianMuslc from './child/tuijianMuslc.vue'
import remen from './child/remen.vue'
export default {
  data () {
    return {
      showUserInfo: false,
      banners: [],
      index: 1
    }
  },
  async created () {
    let res = await getBanners()
    console.log(res)
    this.banners = res.data.banners
  },
  components: {
    tuijianMuslc,
    remen
  },
  methods: {
    // 查看登入状态
    async isClick () {
      let res = await isLogin()
      console.log(res)
    }
  }
}
</script>

<style scoped>
.title {
  height: 44px;
  line-height: 44px;
  margin-left: 10px;
}
.van-popup {
  padding-left: 18px;
  background-color: #f6f6f6;
}
.van-image {
  padding: 10px 0;
}
.title {
  display: flex;
  align-items: center;
  text-align: center;
}
.van-popup .name {
  font-size: 16px;
  margin-right: 20px;
}
.row {
  margin-top: 30px;
  text-align: center;
}
.row .van-col {
  font-size: 10px;
}
.row .van-icon {
  font-size: 20px;
}
.van-cell-group {
  margin-top: 10px;
  background-color: #f6f6f6;
}
.van-cell {
  padding: 0;
  background-color: #f6f6f6;
  padding: 5px;
}
.tabs {
  margin-left: 10px;
  font-size: 14px;
  width: 200px;
  color: #b2b2b2;
}
.tabs .van-col:nth-child(2) {
  color: #000;
}
</style>
